<script setup lang="ts">
import { ref } from "vue";
import { useLocation } from "@/stores/location";
import { useRouter } from "vue-router";
import sHeader from '@/components/SimpleHeader.vue'
import {useCityStoreHook} from "@/stores/city";
const router = useRouter();
// 全局定位数据
const {location, updateCity} = useLocation();
const selectedCity = (city: { cityCode: string; cityName: string }) => {
  updateCity(city.cityCode, city.cityName);
  router.back();
};
const hotCity = ['上海市', '北京市', '广州市', '深圳市', '杭州市', '南京市']
const cityStore = useCityStoreHook()
const getCityList = async () => {
  await cityStore.getCity()
  const allCityList:any[] = cityStore.citys;
  allCityList.forEach(city => {
    city.hot = false
    if(hotCity.includes(city.name)) city.hot = true
  })
  produceIndexedList(
    allCityList.map(item => ({
      cityCode: item.id,
      cityName: item.name,
      firstLetter: item.firstLetter,
      isHot: !!item.hot
    })) || []
  );
};
const produceIndexedList = (
  cityList: {
    cityCode: number;
    cityName: string;
    firstLetter: string;
    isHot: boolean;
  }[]
) => {
  const map: any = {};
  allCityList.value = cityList;
  cityList.forEach(item => {
    if (item.isHot) hotCityList.value.push(item);
    if (map[item.firstLetter]) {
      map[item.firstLetter].push(item);
    } else {
      map[item.firstLetter] = [item];
      indexList.value.push(item.firstLetter);
    }
  });
  indexMap.value = map;
};
const allCityList = ref<any[]>([]);
const hotCityList = ref<any[]>([]);
const indexList = ref<any[]>([]);
const indexMap = ref<any>({});
// 搜索
const searchText = ref("");
const searchResult = ref<any[]>([]);
const onSearch = () => {
  if (searchText.value)
    searchResult.value = allCityList.value.filter(city =>
      city.cityName.includes(searchText.value)
    );
  else searchResult.value.length = 0;
};
const onCancel = () => {
  searchResult.value.length = 0;
};
// 初始化调用
getCityList();
</script>

<template>
  
  <div class="city-selector-page">
    <s-header :name="'选择城市'"></s-header>
    <!-- 搜索 -->
    <van-search
      v-model="searchText"
      shape="round"
      placeholder="输入城市名称查询"
      @update:model-value="onSearch"
      @search="onSearch"
      @cancel="onCancel"
    />
    <!-- 搜索结果 -->
    <div v-if="searchResult.length > 0" class="search-results">
      <van-cell
        v-for="city in searchResult"
        :key="city.cityCode"
        :title="city.cityName"
        @click="selectedCity(city)"
      />
    </div>
    <template v-if="searchResult.length === 0">
      <!-- 定位城市 -->
      <div class="location-city">定位城市</div>
      <div class="city-name">
        {{ location.cityName || "未定位" }}
      </div>
      <!-- 热门城市 -->
      <div class="hot-city-title">热门城市</div>
      <div class="hot-city-list">
        <div
          v-for="city in hotCityList"
          :key="city.cityCode"
          class="hot-city"
          @click="selectedCity(city)"
        >
          {{ city.cityName }}
        </div>
      </div>
      <!-- 城市列表 -->
      <van-index-bar :index-list="indexList">
        <template v-for="letter in indexList" :key="letter">
          <van-index-anchor :index="letter">{{ letter }}</van-index-anchor>
          <van-cell
            v-for="city in indexMap[letter]"
            :key="city.cityCode"
            :title="city.cityName"
            @click="selectedCity(city)"
          />
        </template>
      </van-index-bar>
    </template>
  </div>
</template>

<style scoped lang="less">
.location-city {
  padding: var(--van-index-anchor-padding);
  color: #666666;
}
.city-name {
  padding: var(--van-index-anchor-padding) 0;
  line-height: var(--van-index-anchor-line-height);
}
.hot-city-title {
  padding: var(--van-index-anchor-padding);
  line-height: var(--van-index-anchor-line-height);
  background-color: #f5f5f5 !important;
}
/deep/ .van-index-anchor {
  background-color: #f5f5f5 !important;
}
.city-selector-page {
  .location-city {
    color: #666666;
    font-size: 12px;
  }
  .city-name {
    font-size: 14px;
    font-weight: bold;
  }
  .hot-city-title {
    padding: 16px;
    line-height: 24px;
    background-color: #f5f5f5;
    font-size: 12px;
  }
  .hot-city-list {
    width: 100%;
    padding: 12px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 24px;
    .hot-city {
      padding: 6px 12px;
      border-radius: 12px;
      border: 0.5px solid #ccc;
      margin: 4px 4px 8px 4px;
      font-size: 12px;
    }
  }
  .van-index-anchor {
    background-color: #f5f5f5 !important;
  }
  .search-results {
    .van-cell {
      padding: 12px 16px;
      font-size: 14px;
    }
  }
}
</style>